<template>
  <div>
    <el-card v-loading="addLoading">
      <div class="titel">
        <i class="block"></i>
        <span class="txt">{{ title }}</span>
        <el-tooltip
          v-if="prompt"
          class="item"
          effect="dark"
          placement="right-start"
        >
          <div slot="content" v-html="prompt"></div>
          <i class="el-icon-warning"></i>
        </el-tooltip>
      </div>
      <div class="searchBox">
        <el-radio-group v-model="dayType" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group>
        <div class="right">
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button
            style="margin-left: 10px"
            class="btn"
            icon="el-icon-search"
            size="small"
            @click="addSearch"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        :show-summary="showSummary"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column
          v-for="(item, index) in computOption"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
      <br />
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  props: ["title", "prompt", "type", "showSummary"],
  data() {
    return {
      dayType: "2",
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [
        { date: "2012-10-09", name: "200", address: 30 },
        { date: "2012-10-09", name: "1", address: 310 },
      ],
      total: 0,
      page: 1,
      pageSize: 10,
      addLoading: false,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      table1: [
        { label: "时间", prop: "date" },
        { label: "安装量", prop: "name" },
        { label: "激活量", prop: "name" },
        { label: "活跃用户", prop: "name" },
        { label: "新增注册人数", prop: "name" },
        { label: "新增苹果注册", prop: "name" },
        { label: "新增安卓注册", prop: "name" },
        { label: "当日充值人数", prop: "name" },
        { label: "新增充值人数", prop: "name" },
        { label: "新增充值金额", prop: "name" },
        { label: "总充值金额", prop: "name" },
        { label: "新增转化率", prop: "name" },
        { label: "ARPU", prop: "name" },
        { label: "ARPPU", prop: "name" },
      ],
      table2: [
        { label: "渠道", prop: "date" },
        { label: "新增注册人数", prop: "name" },
        { label: "当日充值人数", prop: "name" },
        { label: "新增充值人数", prop: "name" },
        { label: "新增充值金额", prop: "name" },
        { label: "总充值金额", prop: "name" },
        { label: "新增转化率", prop: "name" },
        { label: "ARPU", prop: "name" },
        { label: "ARPPU", prop: "name" },
      ],
      table3: [
        { label: "时间", prop: "name" },
        { label: "工会编号", prop: "name" },
        { label: "工会名称", prop: "date" },
        { label: "上线人数", prop: "name" },
        { label: "参与匹配人数", prop: "name" },
        { label: "总在线时长", prop: "name" },
        { label: "语音接通次数", prop: "name" },
        { label: "有效通话次数", prop: "name" },
        { label: "语聊宝石收益数", prop: "name" },
        { label: "礼物宝石收益数", prop: "name" },
        { label: "其他宝石收益数", prop: "name" },
        { label: "总宝石收益数", prop: "name" },
      ],
      table4: [
        { label: "时间", prop: "date" },
        { label: "通话人数", prop: "name" },
        { label: "通话次数", prop: "name" },
        { label: "有效通话次数", prop: "name" },
        { label: "通话成功率", prop: "name" },
        { label: "通话中金币消耗", prop: "name" },
        { label: "通话中礼物金币消耗", prop: "name" },
        { label: "通话中其他金币消耗", prop: "name" },
        { label: "通话总时长", prop: "name" },
        { label: "平均通话时长", prop: "name" },
      ],
      table5: [
        { label: "时间", prop: "date" },
        { label: "上线人数", prop: "name" },
        { label: "参与匹配人数", prop: "name" },
        { label: "总在线时长", prop: "name" },
        { label: "语音接通次数", prop: "name" },
        { label: "有效通话次数", prop: "name" },
        { label: "有效通话时长", prop: "name" },
        { label: "接通率", prop: "name" },
        { label: "语聊宝石收益数", prop: "name" },
        { label: "礼物宝石收益数", prop: "name" },
        { label: "其他宝石收益数", prop: "name" },
        { label: "总流水", prop: "name" },
      ],
      table6: [
        { label: "时间", prop: "date" },
        { label: "新增注册人数", prop: "name" },
        { label: "新增充值人数", prop: "name" },
        { label: "新增VIP充值人数", prop: "name" },
        { label: "新增金币充值人数", prop: "name" },
        { label: "新增转化率", prop: "name" },
        { label: "新增VIP充值金额", prop: "name" },
        { label: "新增金币充值金额", prop: "name" },
        { label: "ARPU", prop: "name" },
        { label: "ARPPU", prop: "name" },
        { label: "存留充值人数", prop: "name" },
        { label: "存留VIP充值金额", prop: "name" },
        { label: "存留金币充值金额", prop: "name" },
        { label: "总充值金额", prop: "name" },
      ],
    };
  },
  methods: {
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    //用户新增搜索查询
    addSearch() {},
    getList() {},
  },
  computed: {
    computOption() {
      return this["table" + this.type];
    },
  },
  watch: {
    type: {
      handler(newName, oldName) {
        if (this.type == 4 || this.type == 5) {
          this.dayType = "3";
        }
      },
      immediate: true,
    },
    dayType: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr = [time, time];
          this.startDate = time;
          this.endDate = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.titel {
  display: flex;
  align-items: center;
  .block {
    display: inline-block;
    width: 5px;
    height: 18px;
    background-color: #7b94d8;
  }
  .txt {
    margin: 0 10px;
    font-size: 18px;
    font-weight: 700;
  }
  .el-icon-warning {
    color: #7e84a4;
  }
}
.searchBox {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>